logo头像
Snippet 博客主题

MobX 在 React Native开发中的应用

React Native React Native 2017/04/29 阅读量次

本文于322天之前发表，文中内容可能已经过时。

MobX 是一款精准的状态管理工具库，如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux，那毫不犹豫地说，MobX 的简单性将成为你状态管理的不二之选。

加入我们要实现这样一个功能：创建一个新的列表，向列表中加入新的条目并刷新，这就用到了MobX的状态管理。
这里写图片描述

环境配置

首先，我们为MobX配置相关的环境支持。

1
2
3
4
5
6
1.npm i mobx mobx-react --save //引入mobx
2.npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev //能够使用@标签
3.在项目目录下找到.babelrc文件，并修改为{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}

现在我们项目配置好了，可以写代码了。不过在开发之前需要对

mobx标签

mobx常用的标签做一个解释。

  • @observable: 使用此标签监控要检测的数据；
  • @observer: 使用此标签监控当数据变化是要更新的Component（组件类）
  • @action:使用此标签监控数据改变的自定义方法(当在需要数据改变的时候执行此自定义方法，那么View层也会跟着自动变化，默认此View层已经使用@observer标签监控)

mobx实例1

下面实现一个使用mobx实现一个简单的数据复制更新功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    ScrollView,
    Text,
} from 'react-native';
/*
 * 引入头文件
 * */
import {observable, action} from 'mobx';
import {observer} from 'mobx-react/native';
/*
* 添加数据
* */
const datas = [
    {name:'苹果',count:0},
    {name:'梨',count:0},
    {name:'香蕉',count:0},
    {name:'草莓',count:0},
    {name:'橘子',count:0},
];
/*
* 对整个列表添加观察，观察列表个数的变化
* */
@observer
export default class MobxTestSecond extends Component {
    /*
    * 数据管理器
    * */
    dataManager = new DataSource();
    componentWillMount() {
        /*
        * 赋值初始数据
        * */
        this.dataManager.replace(datas);
    }
    /*
    * 添加一个新的Item
    * */
    addItem = () => {
       let item = {name:'西瓜',count:0};
        this.dataManager.addItem(item)
    };
    /*
    * 删除第一个Item
    * */
    deleteItem = () => {
        this.dataManager.deleteItem(0);
    };
    render() {
        return (
        <View style={styles.container}>
            <View style={styles.addItemView}>
                <Text style={styles.addItem} onPress={this.addItem}>增加</Text>
                <Text style={styles.addItem} onPress={this.deleteItem}>删除</Text>
            </View>
            <ScrollView>
                {
                    this.dataManager.dataSource.slice(0).map((item,i)=> <ItemView key = {i} item = {item}/>)
                }
            </ScrollView>
        </View>
        );
    }
}
/*
* 对每一个Item添加观察,改变个数
* */
@observer
class ItemView extends Component {
    countAdd = () => {
        this.props.item.add();
    };
    countDec = () => {
        this.props.item.dec();
    };
    render() {
        const {item} = this.props;
        return (
            <View style={styles.itemContainer}>
                <Text>{item.name}</Text>
                <Text>{item.count}</Text>
                <Text style={styles.btn} onPress={this.countAdd}> + </Text>
                <Text style={styles.btn} onPress={this.countDec}> - </Text>
            </View>
        );
    }
}
/*
 * 整个列表页数据管理器
 * */
class DataSource {
    // 本地数据源
    @observable
    dataSource = [];
    // 添加初始数据
    @action
    replace = (items) => {
        // 1. 清空原数据
        this.dataSource.splice(0, this.dataSource.length);
        // 2. 加载新数据
        items.map((item, i) => {
            this.dataSource.push(new Item(item));
        });
    };
    // 添加新数据
    @action
    addItem = (item) => {
        this.dataSource.unshift(new Item(item));
    };
    // 删除一条数据
    @action
    deleteItem = (idx) => {
        this.dataSource.splice(idx, 1);
    };
}
/*
 * 单条Item数据管理器
 * */
class Item {
    /*
    * 商品名称（此值是不变的所以不需要检测此值）
    * */
    name;
    /*
    * 监控商品个数
    * */
    @observable
    count;
    constructor(item) {
        this.name = item.name;
        this.count = item.count;
    };
    /*
    * 商品个数+1
    * */
    @action
    add = () => {
        this.count += 1;
    };
    /*
    * 商品个数-1
    * */
    @action
    dec= () => {
        this.count > 0 && (this.count -= 1);
    };
}

案例2

新建一个 listStore.js文件。

  1. 从 mobx 导入 observable – observable
    可以给存在的数据结构如对象、数组和类增加可观察的能力。简单地给类属性增加一个 @observable 装饰器（下一代
    ECMAScript），或者调用 observable 或 extendObservable 函数（ES5）；
  2. 创建一个叫做 ObservableListStore 的类；
  3. 创建一个可观察的数组 list；
  4. 创建三个操作列表数组的方法；
  5. 创建一个 ObservableListStore 的实例 observableListStore；
  6. 导出 observableListStore
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import {observable} from 'mobx'
let index = 0
class ObservableListStore {
  @observable list = []
  addListItem (item) {
    this.list.push({
      name: item, 
      items: [],
      index
    })
    index++
  }
  removeListItem (item) {
    this.list = this.list.filter((l) => {
      return l.index !== item.index
    })
  }
  addItem(item, name) {
    this.list.forEach((l) => {
      if (l.index === item.index) {
        l.items.push(name)
      }
    })
  }
}
const observableListStore = new ObservableListStore()
export default observableListStore

现在已经用了存储器，我们修改项目的入口文件，使用存储，创建导航。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, { Component } from 'react'
import App from './app/App'
import ListStore from './app/mobx/listStore'
import {
  AppRegistry,
  Navigator
} from 'react-native'
class ReactNativeMobX extends Component {
  renderScene (route, navigator) {
    return <route.component {...route.passProps} navigator={navigator} />
  }
  configureScene (route, routeStack) {
    if (route.type === 'Modal') {
      return Navigator.SceneConfigs.FloatFromBottom
    }
    return Navigator.SceneConfigs.PushFromRight
  }
  render () {
    return (
      <Navigator
        configureScene={this.configureScene.bind(this)}
        renderScene={this.renderScene.bind(this)}
        initialRoute={{
          component: App,
          passProps: {
            store: ListStore
          }
        }} />
    )
  }
}
AppRegistry.registerComponent('ReactNativeMobX', () => ReactNativeMobX)

现在，我们来创建应用组件。实现对数据的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import React, { Component } from 'react'
import { View, Text, TextInput, TouchableHighlight, StyleSheet } from 'react-native'
import {observer} from 'mobx-react/native'
import NewItem from './NewItem'
@observer
class TodoList extends Component {
  constructor () {
    super()
    this.state = {
      text: '',
      showInput: false
    }
  }
  toggleInput () {
    this.setState({ showInput: !this.state.showInput })
  }
  addListItem () {
    this.props.store.addListItem(this.state.text)
    this.setState({
      text: '',
      showInput: !this.state.showInput
    })
  }
  removeListItem (item) {
    this.props.store.removeListItem(item)
  }
  updateText (text) {
    this.setState({text})
  }
  addItemToList (item) {
    this.props.navigator.push({
      component: NewItem,
      type: 'Modal',
      passProps: {
        item,
        store: this.props.store
      }
    })
  }
  render() {
    const { showInput } = this.state
    const { list } = this.props.store
    return (
      <View style={{flex:1}}>
        <View style={styles.heading}>
          <Text style={styles.headingText}>My List App</Text>
        </View>
        {!list.length ? <NoList /> : null}
        <View style={{flex:1}}>
          {list.map((l, i) => {
            return <View key={i} style={styles.itemContainer}>
              <Text
                style={styles.item}
                onPress={this.addItemToList.bind(this, l)}>{l.name.toUpperCase()}</Text>
              <Text
                style={styles.deleteItem}
                onPress={this.removeListItem.bind(this, l)}>Remove</Text>
            </View>
          })}
        </View>
        <TouchableHighlight
          underlayColor='transparent'
          onPress={
            this.state.text === '' ? this.toggleInput.bind(this)
            : this.addListItem.bind(this, this.state.text)
          }
          style={styles.button}>
          <Text style={styles.buttonText}>
            {this.state.text === '' && '+ New List'}
            {this.state.text !== '' && '+ Add New List Item'}
          </Text>
        </TouchableHighlight>
        {showInput && <TextInput
          style={styles.input}
          onChangeText={(text) => this.updateText(text)} />}
      </View>
    );
  }
}
const NoList = () => (
  <View style={styles.noList}>
    <Text style={styles.noListText}>No List, Add List To Get Started</Text>
  </View>
)
const styles = StyleSheet.create({
  itemContainer: {
    borderBottomWidth: 1,
    borderBottomColor: '#ededed',
    flexDirection: 'row'
  },
  item: {
    color: '#156e9a',
    fontSize: 18,
    flex: 3,
    padding: 20
  },
  deleteItem: {
    flex: 1,
    padding: 20,
    color: '#a3a3a3',
    fontWeight: 'bold',
    marginTop: 3
  },
  button: {
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: '#156e9a'
  },
  buttonText: {
    color: '#156e9a',
    fontWeight: 'bold'
  },
  heading: {
    height: 80,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#156e9a'
  },
  headingText: {
    color: '#156e9a',
    fontWeight: 'bold'
  },
  input: {
    height: 70,
    backgroundColor: '#f2f2f2',
    padding: 20,
    color: '#156e9a'
  },
  noList: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  noListText: {
    fontSize: 22,
    color: '#156e9a'
  },
})
export default TodoList
  1. 从 mobx-react/native 导入 observer；
  2. 使用 @observer 装饰器描述类，确保相关数组变化后组件独立地重渲染；
  3. 导入已经创建好的组件 NewItem。这是我们要增加新条目时转向的组件；
  4. 在 addListItem中，把 this.state.text 传入this.props.store.addListItem。在与输入框绑定的 updateText 中会更新this.state.text；
  5. 在 removeListItem 中调用 this.props.store.removeListItem 并传入条目；
  6. 在 addItemToList 中调用 this.props.navigator.push，传入条目和数组存储两个参数；
  7. 在 render 方法中，通过属性解构数据存储：
1
const { list } = this.props.store

8.在 render 方法中，也创建了界面，并绑定了类的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { Component } from 'react'
import { View, Text, StyleSheet, TextInput, TouchableHighlight } from 'react-native'
class NewItem extends Component {
  constructor (props) {
    super(props)
    this.state = {
      newItem: ''
    }
  }
  addItem () {
    if (this.state.newItem === '') return
    this.props.store.addItem(this.props.item, this.state.newItem)
    this.setState({
      newItem: ''
    })
  }
  updateNewItem (text) {
    this.setState({
      newItem: text
    })
  }
  render () {
    const { item } = this.props
    return (
      <View style={{flex: 1}}>
        <View style={styles.heading}>
          <Text style={styles.headingText}>{item.name}</Text>
          <Text
            onPress={this.props.navigator.pop}
            style={styles.closeButton}>×</Text>
        </View>
        {!item.items.length && <NoItems />}
        {item.items.length ? <Items items={item.items} /> : <View />}
        <View style={{flexDirection: 'row'}}>
          <TextInput
            value={this.state.newItem}
            onChangeText={(text) => this.updateNewItem(text)}
            style={styles.input} />
          <TouchableHighlight
            onPress={this.addItem.bind(this)}
            style={styles.button}>
            <Text>Add</Text>
          </TouchableHighlight>
        </View>
      </View>
    )
  }
}
const NoItems = () => (
  <View style={styles.noItem}>
    <Text style={styles.noItemText}>No Items, Add Items To Get Started</Text>
  </View>
)
const Items = ({items}) => (
  <View style={{flex: 1, paddingTop: 10}}>
   {items.map((item, i) => {
        return <Text style={styles.item} key={i}>• {item}</Text>
      })
    }
  </View>
)
const styles = StyleSheet.create({
  heading: {
    height: 80,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#156e9a'
  },
  headingText: {
    color: '#156e9a',
    fontWeight: 'bold'
  },
  input: {
    height: 70,
    backgroundColor: '#ededed',
    padding: 20,
    flex: 1
  },
  button: {
    width: 70,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderColor: '#ededed'
  },
  closeButton: {
    position: 'absolute',
    right: 17,
    top: 18,
    fontSize: 36
  },
  noItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  noItemText: {
    fontSize: 22,
    color: '#156e9a'
  },
  item: {
    color: '#156e9a',
    padding: 10,
    fontSize: 20,
    paddingLeft: 20
  }
})
export default NewItem

如果你之前使用过MobX，那么相信在React Native使用同样简单。

赏 支付宝打赏 微信打赏

如果文章对你有帮助，欢迎点击上方按钮打赏作者

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © Snippet
上一篇
本站总访问量次 Copyright © 2017 | Powered by Hexo | Theme by Snippet